<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ezIndex</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

<div class="container" style="margin: 20px auto;" id="ezIndexApp">

    <button type="button" class="btn btn-primary" @click="fnShowCateModal">add</button>

    <!--<button type="button" class="btn btn-link" @click="fnUp">上一页</button>-->
    <!--<button type="button" class="btn btn-link" @click="fnDown">下一页</button>-->

    <div class="card" style="margin-top: 20px;">
        <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
        <div class="card-body">


            <template v-for="(item, index) in cateList" :key="index">

                <button type="button" @click="showIndex(item)" class="btn btn-link">{{item.sname}}</button>
            </template>


            <br />
            <button type="button" @click="showIndexModal()" class="btn btn-success">添加Index</button>
            <table class="table table-responsive-sm">
                <tbody class="w-100">

                <tr class="row mx-0" v-for="(item, index) in ezIndexList">
                    <td class="col-5">{{item.sname}}</td>
                    <td class="col-5">
                        <button type="button" @click="openAddDetailModal(item)" class="btn btn-primary">添加笔记</button>

                        <span v-for="(detail, index) in item.detailList">
                            <button type="button" @click="openDetailModal(detail)" class="btn btn-link">{{detail.sname}}</button>
                        </span>
                    </td>
                </tr>

                </tbody>
            </table>

        </div>
    </div>





    <!-- 模态框 -->
    <div class="modal fade" id="ezCateModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">操作</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">

                    <form>

                        <div class="form-group">
                            <label for="">目录</label>
                            <input type="text" class="form-control" v-model="ezCateForm.sname" required>
                        </div>


                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fnSave">确定</button>
                </div>

            </div>
        </div>
    </div>


    <!-- 模态框 -->
    <div class="modal fade" id="ezIndexModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">操作</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">


                    <form>

                        <div class="form-group">
                            <label for="">索引</label>
                            <input type="text" class="form-control" v-model="ezIndexForm.sname" required>
                        </div>

                        <!-- <div class="form-group">
                            <label for="">内容</label>
                            <textarea class="form-control" v-model="ezIndexForm.timeNote" rows="3"></textarea>
                        </div> -->


                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fnSaveIndex">确定</button>
                </div>

            </div>
        </div>
    </div>



</div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#ezIndexApp',
        data: {

            pageNum: 0,
            ezCateForm: {

            },

            timeList: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
                "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
                "21", "22", "23"],


            ezIndexForm: {

                sysNote: { sid: '' }
            },

            cateList: [],
            ezIndexList: [],

        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //上一页
            fnUp() {
                this.pageNum--;
                if (this.pageNum < 0) {
                    this.pageNum = 0;
                }
                this.queryCate();
            },

            //下一页
            fnDown() {

                this.pageNum++;
                if (this.pageNum > 100) {
                    this.pageNum = 100;
                }

                this.queryCate();
            },

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },


            // 新增 modal
            fnShowCateModal() {

                $('#ezCateModal').modal('show');
            },


            //修改 modal
            fnShowUpdateModal(item) {
                this.ezCateForm = item;
                $('#ezCateModal').modal('show');
            },

            //查看具体的note
            showIndex(item) {

                this.ezIndexForm.ezCate = item;

                var noteId = item.sid;
                this.queryIndex(noteId);

            },


            showIndexModal() {

                if(!this.ezIndexForm.ezCate.sid){
                    alert('请选择目录');
                    return false;
                }
                //console.log(this.selectNote);
                $('#ezIndexModal').modal('show');
            },



            //修改 item
            fnSave() {


                if (!this.ezCateForm.sname) {
                    alert('目录不能为空');
                    return false;
                }


                var _self = this;

                var postUrl = '/ezCates';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.ezCateForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#ezCateModal').modal('hide');
                            _self.ezCateForm = {};
                            _self.queryCate();
                        }

                    }
                });
            },


            fnSaveIndex() {




                var _self = this;
                var cateId = _self.ezIndexForm.ezCate.sid;

                var postUrl = '/ezIndexes';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.ezIndexForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#ezIndexModal').modal('hide');
                            _self.ezIndexForm = {
                                ezCate: {
                                    sid: cateId,
                                }
                            };
                            _self.queryIndex(cateId);
                        }

                    }
                });
            },


            //新增 detail
            openAddDetailModal(item){

                window.open('ezDetailHome?index-id=' + item.sid);
            },



            // 查看 detail 详情
            openDetailModal(detail){

                window.open('ezDetail.html?id=' + detail.sid);
            },

            // 查询 cate
            queryCate() {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./ezCates",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.cateList = response.dat;
                        }

                    }
                });
            },

            //查看某个  目录下的 index
            queryIndex(cateId) {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./ezIndexes?ezCate.sid=" + cateId ,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {
                            _self.ezIndexList = response.dat;
                        }

                    }
                });
            },


        },
        mounted() {

            this.queryCate();
        }
    })


</script>